<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌入测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .title {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
        }
        
        .subtitle {
            color: #7f8c8d;
        }
        
        .controls {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 4px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .form-group input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #3498db;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 8px;
            margin-bottom: 8px;
        }
        
        .btn-primary {
            background: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background: #2980b9;
        }
        
        .btn-success {
            background: #27ae60;
            color: white;
        }
        
        .btn-success:hover {
            background: #229954;
        }
        
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .embed-container {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .embed-frame {
            width: 100%;
            height: 600px;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
        }
        
        .logs {
            background: #2c3e50;
            color: #ecf0f1;
            border-radius: 8px;
            padding: 16px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .log-entry {
            margin-bottom: 4px;
            opacity: 0.8;
        }
        
        .log-entry.new {
            opacity: 1;
            background: rgba(52, 152, 219, 0.2);
            padding: 2px 4px;
            border-radius: 2px;
        }
        
        .log-entry .timestamp {
            color: #95a5a6;
        }
        
        .log-entry .type {
            color: #3498db;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="title">PPT 嵌入功能测试</h1>
            <p class="subtitle">测试 yzs-ppt 嵌入到 yunzhishi 的功能</p>
        </div>
        
        <div class="controls">
            <div class="form-group">
                <label for="projectId">项目 ID:</label>
                <input type="text" id="projectId" value="test-project-123" placeholder="输入项目 ID">
            </div>
            
            <div class="form-group">
                <label for="batchId">批次 ID:</label>
                <input type="text" id="batchId" value="batch-456" placeholder="输入批次 ID">
            </div>
            
            <button onclick="loadEmbed()" class="btn btn-primary">加载嵌入页面</button>
            <button onclick="startGeneration()" class="btn btn-success">开始生成</button>
            <button onclick="cancelGeneration()" class="btn btn-danger">取消生成</button>
            <button onclick="clearLogs()" class="btn">清空日志</button>
        </div>
        
        <div class="embed-container">
            <h3>嵌入页面:</h3>
            <iframe id="embedFrame" class="embed-frame" src="about:blank"></iframe>
        </div>
        
        <div class="embed-container">
            <h3>消息日志:</h3>
            <div class="logs" id="logsContainer">
                <div class="log-entry">
                    <span class="timestamp">[等待中]</span> 
                    <span class="type">SYSTEM</span> 
                    准备接收消息...
                </div>
            </div>
        </div>
    </div>

    <script>
        // DOM 元素
        const elements = {
            projectId: document.getElementById('projectId'),
            batchId: document.getElementById('batchId'),
            embedFrame: document.getElementById('embedFrame'),
            logsContainer: document.getElementById('logsContainer')
        };

        // 添加日志
        function addLog(type, message, data = null) {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.className = 'log-entry new';
            
            let content = `<span class="timestamp">[${timestamp}]</span> <span class="type">${type}</span> ${message}`;
            if (data) {
                content += `<br><pre style="margin-left: 20px; opacity: 0.7;">${JSON.stringify(data, null, 2)}</pre>`;
            }
            
            logEntry.innerHTML = content;
            elements.logsContainer.appendChild(logEntry);
            elements.logsContainer.scrollTop = elements.logsContainer.scrollHeight;
            
            // 移除 new 类
            setTimeout(() => {
                logEntry.classList.remove('new');
            }, 1000);
        }

        // 加载嵌入页面
        function loadEmbed() {
            const projectId = elements.projectId.value.trim();
            const batchId = elements.batchId.value.trim();
            
            if (!projectId || !batchId) {
                alert('请输入项目 ID 和批次 ID');
                return;
            }
            
            const embedUrl = `/ppt/embed/projects/${projectId}?batch_id=${batchId}`;
            elements.embedFrame.src = embedUrl;
            
            addLog('SYSTEM', `加载嵌入页面: ${embedUrl}`);
        }

        // 开始生成
        function startGeneration() {
            sendMessageToEmbed('START_GENERATION', {
                timestamp: new Date().toISOString()
            });
        }

        // 取消生成
        function cancelGeneration() {
            sendMessageToEmbed('CANCEL_GENERATION', {
                reason: 'user_cancelled',
                timestamp: new Date().toISOString()
            });
        }

        // 发送消息到嵌入页面
        function sendMessageToEmbed(type, payload) {
            const message = {
                type: type,
                payload: payload
            };
            
            elements.embedFrame.contentWindow.postMessage(message, '*');
            addLog('SEND', `发送消息到嵌入页面: ${type}`, payload);
        }

        // 清空日志
        function clearLogs() {
            elements.logsContainer.innerHTML = `
                <div class="log-entry">
                    <span class="timestamp">[${new Date().toLocaleTimeString()}]</span> 
                    <span class="type">SYSTEM</span> 
                    日志已清空，准备接收消息...
                </div>
            `;
        }

        // 监听来自嵌入页面的消息
        window.addEventListener('message', function(event) {
            // 在实际应用中，应该验证 event.origin
            const { type, payload } = event.data;
            
            switch (type) {
                case 'PPT_READY':
                    addLog('RECEIVE', 'PPT 页面已就绪', payload);
                    break;
                    
                case 'PPT_STATUS_UPDATE':
                    addLog('RECEIVE', 'PPT 状态更新', payload);
                    break;
                    
                case 'PPT_SUCCESS':
                    addLog('RECEIVE', 'PPT 生成成功', payload);
                    break;
                    
                case 'PPT_FAIL':
                    addLog('RECEIVE', 'PPT 生成失败', payload);
                    break;
                    
                case 'PPT_UNAUTHORIZED':
                    addLog('RECEIVE', 'PPT 访问未授权', payload);
                    break;
                    
                case 'PPT_LOGIN_REQUIRED':
                    addLog('RECEIVE', 'PPT 需要登录', payload);
                    break;
                    
                case 'PPT_CLOSE_REQUIRED':
                    addLog('RECEIVE', 'PPT 请求关闭', payload);
                    break;
                    
                case 'PPT_ERROR':
                    addLog('RECEIVE', 'PPT 系统错误', payload);
                    break;
                    
                case 'PPT_ERROR_REPORT':
                    addLog('RECEIVE', 'PPT 错误报告', payload);
                    break;
                    
                default:
                    addLog('RECEIVE', `未知消息类型: ${type}`, payload);
            }
        });

        // 页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            addLog('SYSTEM', '测试页面已加载');
        });
    </script>
</body>
</html>
